<template>
  <HomePanel ref="target" title="人气推荐" sub-title="人气爆款 不容错过">
    <!-- <ul class="goods-list-top">
      <li v-for="item in goods" :key="item.id">
        <RouterLink to="/">
          <img v-lazys="item.picture" :src="load" alt="" />
          <p class="name">{{ item.title }}</p>
          <p class="desc">{{ item.alt }}</p>
        </RouterLink>
      </li>
    </ul> -->
    <HotList :goods="goods" />
    <template #right>
      <xtx-more></xtx-more>
    </template>
  </HomePanel>
</template>

<script>
import HomePanel from './home-panel'
import { findHot } from '@/api/home'
import { ref } from 'vue'
import HotList from './home-hot-list.vue'
// import { useIntersectionObserver } from '@vueuse/core'
// import { useObserve } from '@/hooks'
import { ob } from '@/hooks/ob'
export default {
  name: 'HomeHot',
  components: { HomePanel, HotList },
  setup () {
    const goods = ref([])
    const target = ref(null)
    const getHot = async () => {
      const data = await findHot()
      goods.value = data.result
    }
    // 监控组件是否进入视口
    // const { stop } = useIntersectionObserver(
    //   target,
    //   ([{ isIntersecting }]) => {
    //     console.log(isIntersecting)
    //     if (isIntersecting) {
    //       stop()
    //       getHot()
    //     }
    //   }
    // )

    // const { target } = useObserve(getHot)
    // 自定义实现ob监控
    const { stop } = ob(
      target,
      ([{ isIntersecting }]) => {
        console.log(1111, isIntersecting)
        if (isIntersecting) {
          stop()
          console.log('进入可视区：mg')
          getHot()
        }
      }
    )

    return { goods, target }
  }
}
</script>
